<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP

        backdrop-filter CSS (opens new window)属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。
        因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

        /* 
        * backdrop-filter 属性用于为元素后面的区域添加图形效果
        * 它会在元素背景（即"背后内容"）上应用滤镜效果
        * 类似于 filter 属性，但影响的是元素背后的内容而非元素本身
        */
        
        /* 1. 关键字值 - 不应用任何滤镜效果 */
        backdrop-filter: none;
        
        /* 2. 使用SVG滤镜 
        * 通过URL引用SVG文件中定义的滤镜
        * 这里引用的是 common-filters.svg 文件中的 id="filter" 的滤镜
        */
        backdrop-filter: url(common-filters.svg#filter);
        
        /* 3. 滤镜函数值 - 各种内置滤镜效果 */
        
        /* 高斯模糊效果 - 2像素半径的模糊 */
        backdrop-filter: blur(2px);
        
        /* 亮度调整 - 降低到原始亮度的60% */
        backdrop-filter: brightness(60%);
        
        /* 对比度调整 - 降低到原始对比度的40% */
        backdrop-filter: contrast(40%);

        /* 投影效果 - 右4px下4px的蓝色投影，10px模糊半径 */
        backdrop-filter: drop-shadow(4px 4px 10px blue);

        /* 灰度转换 - 30%程度的灰度效果 */
        backdrop-filter: grayscale(30%);

        /* 色相旋转 - 将颜色旋转120度 */
        backdrop-filter: hue-rotate(120deg);

        /* 颜色反转 - 70%程度的颜色反转 */
        backdrop-filter: invert(70%);

        /* 透明度调整 - 降低到20%不透明度 */
        backdrop-filter: opacity(20%);

        /* 深褐色调 - 90%程度的深褐色效果 */
        backdrop-filter: sepia(90%);

        /* 饱和度调整 - 增加到原始饱和度的80% */
        backdrop-filter: saturate(80%);

        /* 4. 多重滤镜组合 
        * 可以组合多个滤镜效果，按顺序应用
        * 这里先应用SVG滤镜，然后4px模糊，最后150%饱和度
        */
        backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

        /* 5. 全局值 - 标准的CSS全局关键字 */

        /* 继承父元素的 backdrop-filter 值 */
        backdrop-filter: inherit;

        /* 重置为属性初始值（none） */
        backdrop-filter: initial;

        /* 回滚到浏览器或用户自定义的默认值 */
        backdrop-filter: revert;

        /* 回滚到上一层级的层值（CSS层叠上下文） */
        backdrop-filter: revert-layer;

        /* 取消任何滤镜效果（等同于 none） */
        backdrop-filter: unset;
    -->
</body>
</html>